<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.min.css">
    <style>
        .order{
            color: red;
        }
    </style>
</head>
<body>
<div ng-app="product">
    <div class="container" ng-controller="productController">
        <nav class="navbar navbar-default">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <!--search.id  根据产品编号查询-->
                        <input type="text" class="form-control" placeholder="Search" ng-model="search">
                    </div>
                </form>
            </div>
        </nav>
        <table class="table">
            <thead>
            <tr>
                <th ng-class="{dropup : order === ''}" ng-click="changeOrder('id')">产品编号<span class="caret" ng-class="{order:orderType === 'id'}"></span></th>
                <th ng-class="{dropup : order === ''}" ng-click="changeOrder('name')">产品名称<span class="caret" ng-class="{order:orderType === 'name'}"></span ></th>
                <th ng-class="{dropup : order === ''}" ng-click="changeOrder('price')">产品价格<span class="caret" ng-class="{order:orderType === 'price'}"></span></th>
            </tr>
            </thead>
            <tbody>
            <!--ng-repeat要放置在复制元素上面-->
            <!--filter:{ id:search } 根据产品编号查询-->
            <!--filter:search 所有字段进行匹配-->
            <tr ng-repeat="prod in productData | filter:{id : search} | orderBy: order + orderType">
                <td >{{prod.id}}</td>
                <td >{{prod.name}}</td>
                <td >{{prod.price | currency : '(rmb)'}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script src="../../vendor/angular/angularjs.js" type="text/javascript"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>